<template>
  <div class="widget-step">
    <draggable
      v-model="data.list"
      class=""
      v-bind="{
        group: 'people',
        ghostClass: 'ghost',
        animation: 200,
        handle: '.drag-widget',
      }"
      @end="handleMoveEnd"
      @add="handleWidgetAdd"
    >
      <transition-group name="fade" tag="div" class="widget-form-list">
        <template v-for="(element, index) in data.list">
          <stepItem
            v-if="element && element.key"
            :key="element.key"
            :class="`item${data.list.length}`"
            :element="element"
            :select.sync="selectWidget"
            :index="index"
            :data="data"
          />
        </template>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import stepItem from './stepItem'
export default {
  name: 'WidgetStep',
  components: { draggable, stepItem },
  props: {
    data: {
      type: Object,
      default: () => null
    },
    select: {
      type: Object,
      default: () => null
    }
  },
  data() {
    return {
      selectWidget: null
    }
  },
  mounted() {
    document.body.ondrop = function(event) {
      const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
      if (isFirefox) {
        event.preventDefault()
        event.stopPropagation()
      }
    }
    setTimeout(() => {
      this.initPrecss()
    }, 600)
  },
  methods: {
    // 编辑初始化数据
    initPrecss() {
      if (this.data.list.length > 0) {
        Array.from(this.data.list, (e, i) => {
          const key =
            Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
          this.$set(this.data.list, i, {
            ...e,
            options: { remoteFunc: 'func_' + key },
            key,
            model: '_' + key
          })
        })
        const nodeCodes = this.data.list.map((e) => e.nodeCode)
        const list = this.$parent.menuList[0].templateNodeList.map((e) => {
          e.fixed = nodeCodes.includes(e.nodeCode)
          return e
        })
        this.$parent.menuList[0].templateNodeList = list
        this.selectWidget = this.data.list[0]
      }
    },
    handleMoveEnd({ newIndex, oldIndex }) {
      console.log('index', newIndex, oldIndex)
    },
    handleWidgetAdd(evt) {
      const newIndex = evt.newIndex
      // 为拖拽到容器的元素添加唯一 key
      const key =
        Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
      this.$set(this.data.list, newIndex, {
        ...this.data.list[newIndex],
        options: { remoteFunc: 'func_' + key },
        key,
        model: '_' + key
      })
      // 取消校验提示
      this.$parent.isRequired = false
      this.$parent.$parent.isRequired = false
      // 父组件
      const nodeCodes = this.data.list.map((e) => e.nodeCode)
      const list = this.$parent.menuList[0].templateNodeList.map((e) => {
        e.fixed = nodeCodes.includes(e.nodeCode)
        return e
      })
      this.$parent.menuList[0].templateNodeList = list
      this.selectWidget = this.data.list[newIndex]
    }
  }
}
</script>

<style lang="scss">
$primary-color: #409eff;
$primary-background-color: #ecf5ff;
.widget-step {
  background: #eee;
  padding: 30px 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  & > div,
  .widget-form-list {
    height: 100%;
  }
  .draggable-drag {
    background: #fff;
    height: 100%;
    position: relative;
  }
  .widget-empty {
    position: absolute;
    text-align: center;
    width: 300px;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    color: #ccc;
  }
  .draggable-drag > div {
    height: 100%;
  }
  .widget-form-list {
    display: flex;
    align-content: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    flex-direction: column;

    .ghost {
      background: #2e73ff !important;
      width: 100% !important;
      height: 10px !important;
      overflow: hidden !important;
      transition: all 0.3s ease !important;
    }
  }

  .ghost {
    background: #f56c6c;
    border: 2px solid #f56c6c;
    position: relative;

    &::after {
      background: #f56c6c;
    }
  }

  li.ghost {
    height: 5px;
    list-style: none;
    font-size: 0;
    overflow: hidden;
  }

  .widget-grid {
    background: #f4f6fc;
    position: relative;
    border-left: 5px solid transparent;
    padding: 5px;
    margin: 0 !important;

    &.active {
      border-left: 5px solid $primary-color;
      background: #b3d8ff;
    }
  }

  .widget-grid-container {
    &.ghost {
      background: #f56c6c;
      border: 2px solid #f56c6c;
      outline-width: 0;
      height: 3px;
      box-sizing: border-box;
      font-size: 0;
      content: "";
      overflow: hidden;
      padding: 0;
    }
  }

  .ghost {
    background: #f56c6c;
    border: 2px solid #f56c6c;
    position: relative;

    &::after {
      background: #f56c6c;
    }
  }

  li.ghost {
    height: 5px;
    list-style: none;
    font-size: 0;
    overflow: hidden;
  }
  .item1 {
    height: 100%;
  }
  .item2 {
    height: 50%;
  }
  .item3 {
    height: 33.333333%;
  }
  .item4 {
    height: 25%;
  }
  .item5 {
    height: 20%;
  }
}
</style>
